
{%extends '../tpl/home-base.html'%}
{%block body%}
    <!--=== header intro ===-->
    <section id="home" class="header-intro-1 d-flex align-items-center">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="header-intro-wrap text-center">
                        <div class="header-intro-title"><h3>前端开发日记</h3></div>
                        <div class="header-intro-tag">maiwenbo.com</div>
                        <ul class="list-inline">
                            <li class="list-inline-item"><a href="#" class="btn btn-primary main-btn bg-main">Get Started</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!--=== speciality ===-->
    <section class="speciality">
        <div class="container-fluid">
            <div class="row">
                <a href="" class="col-lg-2 col-md-3 col-sm-4">
                    <div class="speciality-wrap">
                        <div><i class="ion ion-ios-cloud-outline"></i></div>
                        <div class="column-name">NAS搭建</div>
                    </div>
                </a>
                <a href="" class="col-lg-2 col-md-3 col-sm-4">
                    <div class="speciality-wrap">
                        <div><i class="ion ion-ios-book-outline"></i></div>
                        <div class="column-name">前端学习笔记</div>
                    </div>
                </a>
                <a href="" class="col-lg-2 col-md-3 col-sm-4">
                    <div class="speciality-wrap">
                        <div><i class="ion ion-ios-browsers-outline"></i></div>
                        <div class="column-name">Go Lang</div>
                    </div>
                </a>
                <a href="" class="col-lg-2 col-md-3 col-sm-4">
                    <div class="speciality-wrap">
                        <div><i class="ion ion-ios-pie-outline"></i></div>
                        <div class="column-name">Flutter</div>
                    </div>
                </a>
                <a href="" class="col-lg-2 col-md-3 col-sm-4">
                    <div class="speciality-wrap">
                        <div><i class="ion ion-ios-medkit-outline"></i></div>
                        <div class="column-name">Linux</div>
                    </div>
                </a>
                <a href="" class="col-lg-2 col-md-3 col-sm-4">
                    <div class="speciality-wrap">
                        <div><i class="ion ion-ios-analytics-outline"></i></div>
                        <div class="column-name">捡垃圾</div>
                    </div>
                </a>
            </div>
        </div>
    </section>


    <!--=== highlight section ===-->
    <section class="highlight-section">
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="highlight-section-wrap text-center">
                <div class="highlight-section-title"><h3>专注于前端的BUG制造者</h3></div>
                <div class="highlight-section-tag">BUG Manufacturers Focusing on the Front End</div>
            </div>
        </div>
    </div>
</div>
</section>

    <!--=== about us ===-->
    <section id="about" class="about-us">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-6 align-self-center">
                    <div class="about-wrap">
                        <div class="section-tag">Welcome to maiwenbo.com</div>
                        <div class="section-title"><h2>About Me</h2></div>
                        <p>
                            本人擅长 Ai、Fw、Fl、Br、Ae、Pr、Id、Ps 等软件的安装与卸载，精通 CSS、JavaScript、PHP、ASP、C、C++、C#、Java、Ruby、Perl、Lisp、Python、Objective-C、ActionScript、Pascal 等单词的拼写，熟悉 Windows、Linux、OS X、Android、iOS、WP8 等系统的开关机。
                        </p>
                    </div>
                </div>
                <div class="col-lg-6 align-self-center">
                    <div class="about-image text-center">
                        <div><img class="img-fluid" src="/static/home/images/svg/undraw_hello_aeia.svg" alt="About Us"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--=== call to action ===-->
    <section class="call-to-action">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="call-to-action-wrap">
                        <div class="call-to-action-title">
                            <h3>Trust our? Review our projects completed on ThemeForest.net in last year, all the best.</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!--=== testimonial & clients ===-->
    <section id="testimonial" class="testimonial">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="section-title-wrap text-center">
                        <div class="section-tag">Our Best</div>
                        <div class="section-title"><h2>Reviews And Clients</h2></div>
                    </div>
                </div>
                <div class="col-lg-8 col-md-10 col-sm-12 mx-auto">
                    <div id="testimonial-slider" class="testimonial-slider">
                        <div class="slider-item">
                            <div class="testimonial-wrap mx-auto">
                                <div class="testimon-detail">
                                    <div class="testimon-icon"><i class="ion ion-quote"></i></div>
                                    <strong>Great Plugin</strong>
                                    <p>Switching to WordPress from Joomla was greatly helped by a great download manager for WordPress, WPDM. With unsurpassed support I was able to fine tune my downloads section on the website to my delight. </p>
                                </div>
                                <div class="testimon-img-wrap">
                                    <div class="testimon-img"><img src="/static/home/images/team_3.jpg" alt="Profile Image"></div>
                                    <div class="testimon-name">Rob Vens</div>
                                    <div class="testimon-tag">maiwenbo.com</div>
                                </div>
                            </div>
                        </div>
                        <div class="slider-item">
                            <div class="testimonial-wrap mx-auto">
                                <div class="testimon-detail">
                                    <div class="testimon-icon"><i class="ion ion-quote"></i></div>
                                    <strong>Great Plugin</strong>
                                    <p>Switching to WordPress from Joomla was greatly helped by a great download manager for WordPress, WPDM. With unsurpassed support I was able to fine tune my downloads section on the website to my delight. </p>
                                </div>
                                <div class="testimon-img-wrap">
                                    <div class="testimon-img"><img src="/static/home/images/team_2.jpg" alt="Profile Image"></div>
                                    <div class="testimon-name">Rob Vens</div>
                                    <div class="testimon-tag">maiwenbo.com</div>
                                </div>
                            </div>
                        </div>
                        <div class="slider-item">
                            <div class="testimonial-wrap mx-auto">
                                <div class="testimon-detail">
                                    <div class="testimon-icon"><i class="ion ion-quote"></i></div>
                                    <strong>Great Plugin</strong>
                                    <p>Switching to WordPress from Joomla was greatly helped by a great download manager for WordPress, WPDM. With unsurpassed support I was able to fine tune my downloads section on the website to my delight. </p>
                                </div>
                                <div class="testimon-img-wrap">
                                    <div class="testimon-img"><img src="/static/home/images/team_1.jpg" alt="Profile Image"></div>
                                    <div class="testimon-name">Rob Vens</div>
                                    <div class="testimon-tag">Reflektis.com</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-10 col-md-10 col-sm-12 mx-auto">
                    <div class="client-content-wrap">
                        <ul class="list-inline client-content-logo">
                            <li class="list-inline-item"><img src="/static/home/images/clients/microsoft.png" alt="" class="img-fluid"></li>
                            <li class="list-inline-item"><img src="/static/home/images/clients/dlink-logo.png" alt="" class="img-fluid"></li>
                            <li class="list-inline-item"><img src="/static/home/images/clients/nvidia-logo.jpg" alt="" class="img-fluid"></li>
                            <li class="list-inline-item"><img src="/static/home/images/clients/nba.jpg" alt="" class="img-fluid"></li>
                            <li class="list-inline-item"><img src="/static/home/images/clients/ucla.png" alt="" class="img-fluid"></li>
                            <li class="list-inline-item"><img src="/static/home/images/clients/uanl.png" alt="" class="img-fluid"></li>
                            <li class="list-inline-item"><img src="/static/home/images/clients/uflogo.png" alt="" class="img-fluid"></li>
                            <li class="list-inline-item"><img src="/static/home/images/clients/um-logo.png" alt="" class="img-fluid"></li>
                            <li class="list-inline-item"><img src="/static/home/images/clients/upenn-logo.png" alt="" class="img-fluid"></li>
                            <li class="list-inline-item"><img src="/static/home/images/clients/y-plan-logo-small.png" alt="" class="img-fluid"></li>
                            <li class="list-inline-item"><img src="/static/home/images/clients/byulogo.png" alt="" class="img-fluid"></li>
                            <li class="list-inline-item"><img src="/static/home/images/clients/scsba-header-brand.png" alt="" class="img-fluid"></li>
                            <li class="list-inline-item"><img src="/static/home/images/clients/yale_University_logo.svg.png" alt="" class="img-fluid"></li>
                            <li class="list-inline-item"><img src="/static/home/images/clients/logo_unitn.png" alt="" class="img-fluid"></li>
                            <li class="list-inline-item"><img src="/static/home/images/clients/logoTxt.png" alt="" class="img-fluid"></li>
                            <li class="list-inline-item"><img src="/static/home/images/clients/iop.png" alt="" class="img-fluid"></li>
                            <li class="list-inline-item"><img src="/static/home/images/clients/clevelandfire.png" alt="" class="img-fluid"></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!--=== products intro ===-->
    <section id="blog" class="product">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="section-title-wrap text-center">
                        <div class="section-title"><h2>最近更新博客</h2></div>
                        <div class="section-detail-para">Want to give a new look to your site or still need more feature? WordPress Download Manager Plugin has lots of amazing themes, add-ons and there are further more coming continuously...</div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6">
                    <div class="product__item">
                        <div class="card">
                            <div class="product__item-img">
                                <img class="card-img-top img-fluid product-face" src="/static/home/images/thumb/blog-thumb_01.jpg" alt="Product Thumb">
                                <div class="product__item-overlay">
                                    <ul class="list-inline product-info">
                                        <li class="list-inline-item"><a href="single-post.html"><i class="ion ion-ios-search"></i></a> </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="product__content-inner card-body">
                                <div class="product__title-price">
                                    <a href="product-detail.html"><h5 class="card-title">The Best Productivity Apps on Market</h5></a>
                                </div>
                                <div class="product-para">You can use multiple file with single entry at front-end.</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6">
                    <div class="product__item">
                        <div class="card">
                            <div class="product__item-img">
                                <img class="card-img-top img-fluid product-face" src="/static/home/images/thumb/blog-thumb_01.jpg" alt="Product Thumb">
                                <div class="product__item-overlay">
                                    <ul class="list-inline product-info">
                                        <li class="list-inline-item"><a href="single-post.html"><i class="ion ion-ios-search"></i></a> </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="product__content-inner card-body">
                                <div class="product__title-price">
                                    <a href="product-detail.html"><h5 class="card-title">The Best Productivity Apps on Market</h5></a>
                                </div>
                                <div class="product-para">You can use multiple file with single entry at front-end.</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6">
                    <div class="product__item">
                        <div class="card">
                            <div class="product__item-img">
                                <img class="card-img-top img-fluid product-face" src="/static/home/images/thumb/blog-thumb_01.jpg" alt="Product Thumb">
                                <div class="product__item-overlay">
                                    <ul class="list-inline product-info">
                                        <li class="list-inline-item"><a href="single-post.html"><i class="ion ion-ios-search"></i></a> </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="product__content-inner card-body">
                                <div class="product__title-price">
                                    <a href="product-detail.html"><h5 class="card-title">The Best Productivity Apps on Market</h5></a>
                                </div>
                                <div class="product-para">You can use multiple file with single entry at front-end.</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6">
                    <div class="product__item">
                        <div class="card">
                            <div class="product__item-img">
                                <img class="card-img-top img-fluid product-face" src="/static/home/images/thumb/blog-thumb_01.jpg" alt="Product Thumb">
                                <div class="product__item-overlay">
                                    <ul class="list-inline product-info">
                                        <li class="list-inline-item"><a href="single-post.html"><i class="ion ion-ios-search"></i></a> </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="product__content-inner card-body">
                                <div class="product__title-price">
                                    <a href="product-detail.html"><h5 class="card-title">The Best Productivity Apps on Market</h5></a>
                                </div>
                                <div class="product-para">You can use multiple file with single entry at front-end.</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 mt-5">
                    <div class="text-center"><a href="blogpage.html" class="btn btn-primary main-btn btn-reload"><i class="fa fa-spinner fa-spin"></i> View More</a></div>
                </div>

            </div>
        </div>
    </section>

    <!--=== call to action 2 ===-->
    <section id="action" class="call-to-action-2">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="call-to-action-wrap">
                        <div class="call-to-action-title">
                            <div class="text-center"><a href="#" class="btn btn-primary main-btn">Download Apps </a></div>
                            <h3>Trust our? Review our projects completed on ThemeForest.net in last year, all the best.</h3>
                        </div>
                        <div class="list-wrap">
                            <ul class="list-inline applications">
                                <li class="list-inline-item"><a href="#"><img src="/static/home/images/app1.png" alt="Application"></a></li>
                                <li class="list-inline-item"><a href="#"><img src="/static/home/images/app2.png" alt="Application"></a></li>
                                <li class="list-inline-item"><a href="#"><img src="/static/home/images/app3.png" alt="Application"></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

{%endblock%}
